<!-- src/components/TodoFilters.vue -->
<template>
    <div class="todo-filters">
      <div class="remaining-indicator" v-if="remainingCount > 0">
        <span class="dot"></span>
        有{{ remainingCount }}个待办任务
      </div>
      <div class="filter-group">
        <button 
          class="filter-button" 
          :class="{ 'active': modelValue === 'all' }" 
          @click="updateFilter('all')"
        >全部</button>
        <button 
          class="filter-button" 
          :class="{ 'active': modelValue === 'active' }" 
          @click="updateFilter('active')"
        >未完成</button>
        <button 
          class="filter-button" 
          :class="{ 'active': modelValue === 'completed' }" 
          @click="updateFilter('completed')"
        >已完成</button>
      </div>
      <button 
        class="filter-button clear-btn" 
        @click="$emit('clear-completed')" 
        v-if="completedCount > 0"
      >
        清除已完成
      </button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TodoFilters',
    props: {
      modelValue: {
        type: String,
        required: true
      },
      remainingCount: {
        type: Number,
        required: true
      },
      completedCount: {
        type: Number,
        required: true
      }
    },
    emits: ['update:modelValue', 'clear-completed'],
    setup(props, { emit }) {
      const updateFilter = (filter) => {
        emit('update:modelValue', filter);
      };
  
      return {
        updateFilter
      };
    }
  }
  </script>